<template>
  <!-- 图片查看 -->
  <div class="image_list" v-if="fileList?.length">
    <div class="picture_item" v-for="(item, index) in fileList" :key="index">
      <el-image
        class="picture"
        :src="item"
        :style="styleC"
        :preview-src-list="fileList"
        :initial-index="imageIndex"
        fit="cover"
      >
        <template #error>
          <div class="image-slot">
            <i class="el-icon-picture-outline"></i>
          </div>
        </template>
      </el-image>
      <div class="file">
        <span class="el-upload-list__item-actions" @click="handlePictureCardPreview(index)">
          <span class="el-upload-list__item-preview">
            <el-icon><zoom-in /></el-icon>
          </span>
        </span>
      </div>
      
    </div>
    <el-image-viewer
      v-if="dialogVisible"
      @close="closeViewer"
      :url-list="fileList"
      :initial-index="imageIndex"
      :zIndex="9999"
    />
  </div>
</template>
<script setup>
import { vModelValue } from '@/utils/hooks.js';

const props = defineProps({
  modelValue: {
    type: Array,
    default: [],
  },
  limit: {
    type: Number,
    default: 0,
  },

  deleteShow: {
    // 是否展示删除按钮
    type: Boolean,
    default: true,
  },
  styleC: {
    // 图片链接，可不填
    type: String,
    default: null,
  },
});

const emits = defineEmits(['update:modelValue']);
const { newValue: key } = vModelValue(props, emits);
let fileList = ref(key);

let dialogImageUrl = ref('');
const imageIndex = ref(0);
let dialogVisible = ref(false);

// 预览
function handlePictureCardPreview(index) {
  dialogImageUrl.value = fileList.value[index];
  imageIndex.value = index;
  dialogVisible.value = true;
}

// 关闭查看器
function closeViewer() {
  dialogVisible.value = false;
}
</script>
<style lang="scss" scoped>
.image_list {
  display: flex;
  .picture_item {
    margin-right: 14px;
    position: relative;
    .picture,
    .file {
      width: 70px;
      height: 70px;
      border-radius: 4px;
      overflow: hidden;
    }
    .file {
      position: absolute;
      top: 0;
    }
  }
}

:deep() {
  .el-upload-list__item-actions {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    cursor: default;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    opacity: 0;
    font-size: 20px;
    background-color: var(--el-overlay-color-lighter);
    transition: opacity var(--el-transition-duration);
  }

  .el-upload-list__item-actions:hover {
    opacity: 1;
  }
}
</style>
